<template>
  <view class="deco-film-list" :class="[`deco-film-list--${data.data.mode}`]" :style="[innerStyle]">
    <view class="header-wrap flex justify-between">
      <view class="flex items-center">
        <view class="pr-15 font-32 text-666 transition hot" :class="{ 'is-active': tab === 'hot' }" @click="onClickTab('hot')">正在热映</view>
        <view class="pl-15 font-32 text-666 transition" :class="{ 'is-active': tab === 'pre' }" @click="onClickTab('pre')">即将上映</view>
      </view>
      <view class="flex" @click="handleClickMore">
        <zm-icon-text name="arrow" :text="`全部${list.length}部`" color="#999999" text-color="#666666" text-size="26rpx" text-left weight="bold"></zm-icon-text>
      </view>
    </view>
    <!-- 横向 -->
    <scroll-view v-if="data.data.mode === 'horizontal'" class="mt-24" scroll-x>
      <view class="film-list-horizontal" :style="[listStyle(0)]">
        <film-card-vertical v-for="item in filterHotFilms" :key="item.filmId" :data="item"></film-card-vertical>
      </view>
      <view class="film-list-horizontal" :style="[listStyle(1)]">
        <film-card-vertical v-for="item in filterPreFilms" :key="item.filmId" form="pre" :data="item"></film-card-vertical>
      </view>
    </scroll-view>
    <!-- 竖向 -->
    <view v-else class="film-list-vertical">
      <view :style="[verticalListStyle(0)]" class="swiper-item-content-hot radius-16 grid grid-cols-1 gap-y-20">
        <view v-for="item in filterHotFilms" :key="item.filmId">
          <film-card-horizontal :data="item"></film-card-horizontal>
        </view>
      </view>
      <view :style="[verticalListStyle(1)]" class="swiper-item-content-pre radius-16 grid grid-cols-1 gap-y-20">
        <view v-for="item in filterPreFilms" :key="item.filmId">
          <film-card-horizontal :data="item"></film-card-horizontal>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatDate } from "@/utils/date"
import mixin from "@/decoration/mixins"
export default {
  name: "deco-film-list",
  mixins: [mixin],
  data() {
    return {
      tab: "hot",
      list: [],
      hotFilms: [],
      filterHotFilms: [],
      filterPreFilms: [],
      preFilms: [],
      hotCount: 0,
      swiperIndex: 0
    }
  },
  computed: {
    listStyle() {
      return (index) => {
        return {
          display: this.swiperIndex == index ? "flex" : "none"
        }
      }
    },
    verticalListStyle() {
      return (index) => {
        return {
          display: this.swiperIndex == index ? "grid" : "none"
        }
      }
    },
    versionStyle() {
      return (index) => {
        const style = {}
        style.top = 8 + index * 28 + "rpx"
        return style
      }
    }
  },
  mounted() {
    this.init()
    this.handleGetHotFilm()
    this.handleGetPreFilm()
  },
  beforeDestroy() {
    uni.removeStorageSync("filmType")
    uni.$off("deco-film-list.refresh")
  },
  methods: {
    init() {
      if (this.mitt) {
        this.mitt.on("refresh", () => {
          this.handleGetHotFilm()
          this.handleGetPreFilm()
        })
        uni.$on("filmTypeChanged", (type) => {
          // 更新页面
          this.tab = type
          this.swiperIndex = this.tab == "hot" ? 0 : 1
        })
        uni.$on("deco-film-list.refresh", () => {
          this.handleGetHotFilm(true)
          this.handleGetPreFilm(true)
        })
      }
    },
    async handleGetHotFilm(refresh = false) {
      const list = await uni.$api.film.getHotFilmList()
      if (list?.length) {
        this.hotFilms = list.map((item) => {
          return { ...item, versions: item.version?.split(",") || [] }
        })
        if (refresh) {
          this.filterHotFilms = []
          this.$nextTick(() => {
            this.filterHotFilms = this.hotFilms.slice(0, 10)
          })
        } else {
          this.filterHotFilms = this.hotFilms.slice(0, 10)
        }
        if (this.swiperIndex == 0) this.list = list
      }
    },
    async handleGetPreFilm(refresh = false) {
      const res = await uni.$api.film.getPreFilmList({ pageSize: "100", preDate: formatDate(new Date()) })
      this.preFilms = res.list?.map((item) => {
        return { ...item, versions: item.version?.split(",") || [] }
      })
      if (refresh) {
        this.filterPreFilms = []
        this.$nextTick(() => {
          this.filterPreFilms = this.preFilms?.slice(0, 10) || []
        })
      } else {
        this.filterPreFilms = this.preFilms?.slice(0, 10) || []
      }
      if (this.swiperIndex == 1) this.list = this.preFilms
    },
    onClickTab(type) {
      this.tab = type
      if (type === "hot") {
        this.list = this.hotFilms
        this.swiperIndex = 0
      }
      if (type === "pre") {
        this.list = this.preFilms
        this.swiperIndex = 1
      }
    },
    handleClickMore() {
      this.toView({ url: "pages/cinema/film-list/film-list", params: { type: this.tab } })
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-film-list {
  position: relative;
  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
  &--horizontal {
    padding: 20rpx;
    background-color: #fff;
  }
  .header-wrap {
    .is-active {
      color: #333333;
      font-weight: bold;
    }
    .hot {
      position: relative;
      &::after {
        top: 50%;
        right: 0;
        content: "";
        width: 1rpx;
        height: 18rpx;
        position: absolute;
        transform: translateY(-50%);
        background-color: #cccccc;
      }
    }
  }
  .vertical-line {
    width: 2rpx;
    height: 16rpx;
    margin: 0 10rpx;
    border-radius: 2rpx;
    background-color: #eee;
  }

  .film-list-horizontal {
    display: flex;
    .film-item {
      width: 204rpx;
      display: flex;
      margin-right: 16rpx;
      flex-direction: column;
      .film-version {
        top: 8rpx;
        left: 8rpx;
        z-index: 1;
        height: 28rpx;
        padding: 4rpx;
        display: flex;
        font-size: 20rpx;
        color: #ffffff;
        font-weight: bold;
        position: absolute;
        border-radius: 4rpx;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
      }
      .film-score {
        left: 0;
        bottom: 0;
        width: 204rpx;
        height: 67rpx;
        z-index: 1;
        display: flex;
        color: #ffffff;
        padding: 0 12rpx;
        position: absolute;
        align-items: center;
        border-radius: 0rpx 0rpx 12rpx 12rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      }
    }
  }
  .film-list-vertical {
    display: flex;
    margin-top: 20rpx;
    flex-direction: column;
    .film-item {
      display: flex;
      margin-top: 20rpx;
      align-items: center;
      padding: 30rpx 20rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .film-version {
        top: 8rpx;
        left: 8rpx;
        z-index: 1;
        display: flex;
        padding: 0 6rpx;
        font-size: 18rpx;
        color: #ffffff;
        font-weight: bold;
        position: absolute;
        border-radius: 4rpx;
        align-items: center;
        background-color: #000000;
      }
      .play-btn {
        z-index: 1;
        right: 12rpx;
        bottom: 12rpx;
        width: 46rpx;
        height: 46rpx;
        display: flex;
        position: absolute;
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>
